<!-- 计算属性 -->

<script setup>
import { computed, ref } from 'vue';

// 定义2个变量
let num1 = 1;
let num2 = 2;

// 使用函数实现计算
function calcFunc(){
    console.log("calcFunc");
    return num1+num2;
}
// 计算函数 计算属性
let calcCom1 = computed(function(){
    console.log("calcCom1");
    return num1+num2;
})

// 计算函数
// 箭头函数
// let calcCom2 = computed(()=>num1-num2); // 只有返回值，连花括号都不用写
let calcCom2 = computed(()=>{
    console.log("calcCom2");
    return num1+num2;
});
// 计算 设置 get set
let firstName = ref("王者");
let lastName = ref("荣耀");

let fullNameCom1 = computed({ // 这种写法和上面的 是一样的
    get(){
        return firstName.value + "~" + lastName.value;
    }
});

let fullNameCom2 = computed({ 
    get(){
        return firstName.value + "~" + lastName.value;
    },set(newValue){
        firstName.value = newValue.split("-")[0];
        lastName.value = newValue.split("-")[1];
    }
});
fullNameCom2.value = "刘-德华";


</script>

<template>
{{ calcFunc() }}-- <!-- 每调用一次 执行一次 -->
{{ calcFunc() }}    <!-- 每调用一次 执行一次 -->
<br/>
{{ calcCom1 }}--  <!-- 第一次被调用 -->
{{ calcCom1 }}      <!-- 第二次直接用缓存数据（减少开销） -->
<br/>
{{ calcCom2 }}--  <!-- 第一次被调用 -->
{{ calcCom2 }}      <!-- 第二次直接用缓存数据（减少开销） -->
<br/>
{{ fullNameCom1 }}
<br/>
{{ fullNameCom2 }} <!--  自动调用get 获得 数据 --> 

</template>

